<template>
    <el-dialog :title="popTitle.title" :visible.sync="workOrder" width="50% !important" :show-close="false"
        :close-on-click-modal="false">
        <el-form :model="params">
            <div v-if="popTitle.title == '删除工单'">
                <div>是否要删除该工单?</div>
                <div style="margin-left: 100px;margin-top:40px; font-size: 16px;">工单编号: {{ params.workOrderId }}</div>
            </div>
            <div v-else-if="popTitle.title == '删除角色'">
                <div>是否要删除该角色?</div>
                <div style="margin-left: 100px;margin-top:40px; font-size: 16px;">角色ID: {{ params.roleId }}</div>
            </div>
            <div v-else-if="popTitle.title == '指派工单'">
                <el-form-item label="维修人员" :label-width="formLabelWidth">
                    <el-select v-model="params.userId" placeholder="维修员">
                        <el-option v-for="(item, index) in maintenance" :label="item" :value="item"
                            :key="index"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div v-else-if="popTitle.title == '创建角色'">
                <div v-for="(item, index) in addTitle" :key="index">
                    <el-form-item :label="item" :label-width="formLabelWidth">
                        <el-input v-model="params[index]" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
            </div>
            <div v-else-if="popTitle.title == '处理结果'">
                <el-form-item label="是否完成" :label-width="formLabelWidth">
                    <el-select v-model="params.state" placeholder="是否完成">
                        <el-option label="完成" value="1"></el-option>
                        <el-option label="未完成" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" autosize placeholder="不超过85字" v-model="params.deatail">
                    </el-input>
                </el-form-item>
                <!-- 图片上传 -->
                <el-upload style="margin-left: 120px;" action="#" list-type="picture-card" :auto-upload="false"
                    :on-change="upchangeimg" accept=".png,.jpg,.jpeg">
                    <i slot="default" class="el-icon-plus" style="line-height: 130px;"></i>
                    <div style="line-height: 0px; margin-top: -50px;">上传图片</div>
                    <div slot="file" slot-scope="{file}">
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                    </div>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </div>
            <div v-else-if="popTitle.title == '结单'">
                <div>{{ params.workOrderId }} 号订单已完成</div>
            </div>
            <div v-else>
                <div v-for="(item, index) in addTitle" :key="index">
                    <el-form-item v-if="item == '工单类型'" :label="item" :label-width="formLabelWidth">
                        <el-select v-model="params[index]" placeholder="工单类型">
                            <el-option label="数值报警" value="1"></el-option>
                            <el-option label="故障报警" value="2"></el-option>
                            <el-option label="离线报警" value="3"></el-option>
                            <el-option label="其他" value="4"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item v-else :label="item" :label-width="formLabelWidth">
                        <el-input v-model="params[index]" autocomplete="off"></el-input>
                    </el-form-item>
                </div>
            </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancelWorkOrder">取 消</el-button>
            <el-button type="primary" @click="determineWorkOrder">确 定</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { getData } from '@/api/table'
import { Message } from 'element-ui'

export default {
    props: {
        workOrder: {
            type: Boolean,
            required: true,
        },
        params: {
            type: Object,
            required: true,
        },
        addTitle: {
            type: Object,
            required: true,
        },
        popTitle: {
            type: Object,
            required: true,
        }
    },
    data() {
        return {
            formLabelWidth: '120px',
            // 维修员工列表
            maintenance: [],
            upimages: '',

            dialogVisible: false,
            dialogImageUrl: '',

            formdata: null
        }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    methods: {
        // 上传图片
        upchangeimg(data) {
            this.upimages = data.raw
        },
        cancelWorkOrder() {
            this.$emit('custom-event', false);
        },
        determineWorkOrder() {
            let url = ''
            this.formdata = new FormData();
            if (this.popTitle.title == '创建工单') {
                // 创建工单接口
                url = '/workOrder/save';
            } else if (this.popTitle.title == '修改工单') {
                //修改工单接口
                url = '/workOrder/update';
            } else if (this.popTitle.title == '删除工单') {
                // 删除工单接口
                url = '/workOrder/remove';
            } else if (this.popTitle.title == '指派工单') {
                // 指派工单接口
                url = '/workOrder/assign';
            } else if (this.popTitle.title == '处理结果') {
                // 处理工单接口
                url = '/handle/update';
            } else if (this.popTitle.title == '结单') {
                // 结单接口
                url = '/workOrder/confirm';
            } else if (this.popTitle.title == '创建角色') {
                // 创建角色接口
                url = '/role/save';
            } else if (this.popTitle.title == '删除角色') {
                // 创建角色接口
                url = '/role/remove';
            } else if (this.popTitle.title == '修改角色') {
                // 创建角色接口
                url = '/role/update';
            };
            const met = 'post'
            if (this.popTitle.title == '删除工单') {
                this.formdata.append('workOrderId', this.params.workOrderId)
            } else if (this.popTitle.title == '指派工单') {
                // data = { params: JSON.stringify(this.params) }
                this.formdata.append('params', JSON.stringify(this.params))
            } else if (this.popTitle.title == '处理结果') {
                this.formdata.append('params', JSON.stringify(this.params))
                this.formdata.append('uploadFile', this.upimages)
            } else if (this.popTitle.title == '结单') {
                this.formdata.append('workOrderId', this.params.workOrderId)
            } else if (this.popTitle.title == '删除角色') {
                this.formdata.append('roleId', this.params.roleId)
            } else if (this.popTitle.title == '修改角色') {
                this.formdata.append('params', JSON.stringify(this.params))
            } else {
                this.formdata.append('params', JSON.stringify(this.params))
            }
            console.log(JSON.stringify(this.params));
            
            getData(url, met, this.formdata).then(res => {
                this.$emit('deleteData', res.code);
                Message({
                    message: res.msg,
                    type: 'success',
                    duration: 3 * 1000
                })
            })
            this.$emit('custom-event', false);
        }
    },
    created() {
        // 获取维修人员信息
        let url = '/user/getRepairman'
        let met = 'get'
        let data = ''
        getData(url, met, data).then(res => {
            this.maintenance = res.msg
        })
    }
};
</script>

<style  scoped></style>